<template>
	<a-card class="general-card" title="兼职讲师管理">
		<a-row>
			<a-col :flex="1">
				<a-form :model="searchParam" :label-col-props="{ span: 4 }" :wrapper-col-props="{ span: 20 }" label-align="right">
					<a-row :gutter="20">
						<a-col :span="10">
							<a-form-item label="讲师姓名">
								<a-input v-model="searchParam.teacherName" placeholder="请输入讲师姓名" />
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-col>
			<a-divider style="height: 84px" direction="vertical" />
			<a-col :flex="'86px'" style="text-align: right">
				<a-space direction="vertical" :size="18">
					<a-button type="primary" @click="search">
						<template #icon> <icon-search /> </template>搜索
					</a-button>
					<a-button @click="reset">
						<template #icon> <icon-refresh /> </template>重置
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<a-divider style="margin-top: 10px" />
		<a-row style="margin-bottom: 16px">
			<a-col :span="12">
				<a-space>
					<a-button type="primary" @click="showEditModel()">
						<template #icon>
							<icon-plus />
						</template>
						新增
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<a-table
			row-key="id"
			:pagination="pageable"
			page-position="br"
			@page-change="handleCurrentChange"
			@page-size-change="handleSizeChange"
			:loading="loadingValue"
			:columns="columns"
			:data="records"
			:bordered="false"
			size="medium"
		>
			<template #operations="{ record }">
				<a-button type="text" size="small" @click="showEditModel(record)"> 编辑 </a-button>
				<a-button type="text" size="small" @click="showModel(record)"> 查看授课信息 </a-button>
				<a-popconfirm content="确认要删除本条数据及其所有关联课程信息?" type="error" @ok="deleteRecord(record)">
					<a-button type="text" size="small" status="danger"> 删除 </a-button>
				</a-popconfirm>
			</template>
		</a-table>
	</a-card>
	<edit ref="editModelRef" @successFunc="getTableList" />
	<class-view ref="modelRef" />
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
import { useTable } from '@/hooks/useTable';
import { deleteById, getTeacherList } from '@/api/audit';
import ClassView from '@/views/audit/teacher/class_view.vue';
import { Audit, User } from '@/api/types';
import { Message, TableColumnData } from '@arco-design/web-vue';
import Edit from '@/views/audit/teacher/edit.vue';

const { records, pageable, searchParam, loadingValue, getTableList, search, reset, handleSizeChange, handleCurrentChange } = useTable(getTeacherList);
const columns: TableColumnData[] = [
	{
		title: 'id',
		dataIndex: 'id',
		width: 50,
	},
	{
		title: '讲师姓名',
		dataIndex: 'teacherName',
		width: 80,
	},
	{
		title: '身份证号',
		dataIndex: 'teacherIdCardNo',
		width: 120,
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '协议开始时间',
		dataIndex: 'agreementStartTime',
		width: 100,
	},
	{
		title: '协议结束时间',
		dataIndex: 'agreementEndTime',
		width: 100,
	},
	{
		title: '修改时间',
		dataIndex: 'updateTime',
		width: 120,
		ellipsis: true,
		tooltip: true,
	},
	{
		title: '操作',
		slotName: 'operations',
		width: 250,
		align: 'center',
	},
];

interface ModelExpose {
	acceptParams: (params: any) => void;
}
const modelRef = ref<ModelExpose>();
const showModel = (rowData: Audit.Teacher) => {
	const params = {
		visible: true,
		rowData: { ...rowData },
	};
	modelRef.value!.acceptParams(params);
};

interface EditModelExpose {
	acceptParams: (params: any) => void;
}
const editModelRef = ref<ModelExpose>();
const showEditModel = (rowData?: Audit.Teacher) => {
	const params = {
		visible: true,
		rowData: { ...rowData },
	};
	editModelRef.value!.acceptParams(params);
};

const deleteRecord = async (rowData: Audit.Teacher) => {
	await deleteById(rowData.id);
	Message.success('数据删除成功');
	await getTableList();
};

onMounted(() => {
	getTableList();
});
</script>

<script lang="ts">
export default {
	name: 'SearchTable',
};
</script>

<style scoped lang="less">
.container {
	padding: 0 20px 20px 20px;
}
:deep(.arco-table-th) {
	&:last-child {
		.arco-table-th-item-title {
			margin-left: 16px;
		}
	}
}
.action-icon {
	margin-left: 12px;
	cursor: pointer;
}
.active {
	color: #0960bd;
	background-color: #e3f4fc;
}
.setting {
	display: flex;
	align-items: center;
	width: 200px;
	.title {
		margin-left: 12px;
		cursor: pointer;
	}
}
:deep(.arco-card-body) {
	.arco-pagination {
		margin-top: 20px;
	}
}
//:deep(.arco-table) {
//	height: 430px;
//}
</style>
